<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<!--字体图标-->
<link href="http://cdn.javaex.cn/javaex/pc/css/icomoon.css" rel="stylesheet" />
<!--动画-->
<link href="http://cdn.javaex.cn/javaex/pc/css/animate.css" rel="stylesheet" />
<!--骨架样式-->
<link href="http://cdn.javaex.cn/javaex/pc/css/common.css" rel="stylesheet" />
<!--皮肤（缇娜）-->
<link href="http://cdn.javaex.cn/javaex/pc/css/skin/tina.css" rel="stylesheet" />
<!--jquery，不可修改版本-->
<script src="http://cdn.javaex.cn/javaex/pc/lib/jquery-1.7.2.min.js"></script>
<!--全局动态修改-->
<script src="http://cdn.javaex.cn/javaex/pc/js/common.js"></script>
<!--核心组件-->
<script src="http://cdn.javaex.cn/javaex/pc/js/javaex.min.js"></script>
<!--表单验证-->
<script src="http://cdn.javaex.cn/javaex/pc/js/javaex-formVerify.js"></script>
<title> 贪吃蛇游戏</title>
	<style>
		*{
			box-sizing: border-box;
			margin:0;
			padding: 0;
		}
		html,body{
			height: 100%;
			width: 100%;
			font-size: 18px;
			font-weight: 600;
		}
		#map{
			position: absolute;
			margin:auto;
			width: 670px;
			height: 670px;
			border: 5px solid black;
			top:0;
			bottom: 0;
			left:0;
			right:0;
			visibility:hidden;
		}
		#Snak_head{
			width: 20px;
			height: 20px;
			background-color: red;
			position: absolute;
			box-shadow: 0 0 15px 1px black;
		}
		.food_span{
			position: absolute;
			display: block;
			background-color: blue;
			width: 20px;
			height: 20px;
		}
		.Snak_body{
			position: absolute;
			width: 20px;
			height: 20px;
			background-color: black;
			box-shadow: 0 0 15px 1px black;
		}
		#Start_game{
			position: absolute;
			width: 100%;
			height: 33%;
			top:0;
			bottom:0;
			margin:auto;
			display: flex;
			visibility: visible;
			align-items:center;
			justify-content:space-around;
			border:1px solid black;
			font-size: 5.5rem;
			background-color: black;
			color: white;
			z-index: 9999
		}
		#Start_game span{
			position: relative;
		}
		select {
			appearance:none;
			-moz-appearance:none;
			-webkit-appearance:none;
			width:60px;
			height: 30px;
			margin-left:18px;
			outline: none;
			padding-left:15px;
			border-radius: 5px;
		}
		#Start_game span:after {
			position: absolute;
			overflow: hidden;
			display: inline-block;
			vertical-align: bottom;
			animation: loading 2s -2s steps(3) infinite;
			content: attr(data-text);
		}
		@keyframes loading {
			0%{
				width: 0rem;
			}
			33%{
				width: 5rem;
			}
			100%{
				width: 10rem;
			}
		}
	</style>
</head>
<body>
	<!--顶部导航-->
	<div class="admin-navbar">
		<div class="admin-container-fluid clear">
			<!--logo名称-->
			<div class="admin-logo">贪吃蛇游戏</div>
<!--			<span th:text="${session.username}" id="usernamee"></span>-->
			
			<!--导航-->
			<ul class="admin-navbar-nav fl">
				<li class="active" style="margin-left: auto"><a href="#" id="demo">排行榜</a></li>

<!--				<li class="active" style="margin-left: auto"><button id="demo" class="bottom blur">Rank</button></li>-->


			</ul>
			
			<!--右侧-->
			<ul class="admin-navbar-nav fr">
				<li>
					<a th:if="${session.username} == null" href="login" id="dl">登陆</a>
					<a th:if="${session.username} != null"><span th:text="${session.username}" id="username"></span></a>

					<ul class="dropdown-menu" style="right: 10px;">
						<li><a href="/userLogout">退出</a></li>
					</ul>
				</li>
			</ul>
		</div>
	</div>


	<div id="Start_game"><span data-text="" >开始游戏</span></div>
	<div id="score" style="margin-top: 100px"><span >当前得分:</span> <strong id="currentScore">游戏未开始</strong></div>
	<div id="dir"><span>指令状态:</span> <strong>游戏未开始</strong></div>
	<div id="diff"><span>游戏难度</span>
		<select>
			<option value ="500">简单</option>
			<option value ="300">普通</option>
			<option value="100">困难</option>
			<option value="50">地狱</option>
		</select>
	</div>
	<div><button id="submitScore" class="edit-btn">提交成绩</button></div>
	<div id="map">  <!--地图-->
		<div id="Snak_head"></div> <!--Snak_head-->
	</div>




	

</body>
<script type="text/javascript" src="./js/贪吃蛇.js"></script>
<script>

	$("#submitScore").click(function () {

		var username = document.getElementById("username");
		if(username==null){
			alert("请先登陆");
			return;
		}
		username = username.innerText;
		var score = document.getElementById("currentScore").innerText;
		alert(username+"+"+score);

		$.ajax({
			type : "POST",
			url : "/submitScore",
			contentType : "application/json;charset=UTF-8",
			dataType : "json",
			data : JSON.stringify({
				"username" : username,
				"score" : score
			}),
			success : function (data) {
				if (data){
					console.log(data);
					// location.href="/";
					alert("Submit Success!")
				}else {
					alert("Submit Failed!");
				}
			}
		})
	});

	$("#demo").click(function () {
		javaex.dialog({
			type:"dialog",
			width:"380",
			height:"300",
			url: "/getRankList"
		});
	});



	var hightUrl = "/index";
	javaex.menu({
		id : "menu",
		isAutoSelected : true,
		key : "",
		url : hightUrl
	});


	
	// 控制页面载入
	function page(url) {
		$("#page").attr("src", url);
	}
</script>
</html>